<!--
 * @Author: zy
 * @Date: 2022-07-25 15:51:24
 * @LastEditTime: 2022-07-27 10:18:22
 * @Description: 详情
-->
<template>
  <view>
    <view class="cu-card dynamic" v-if="memberInfo">
      <view class="cu-item shadow">
        <view class="cu-list menu-avatar">
          <view class="cu-item">
            <view class="cu-avatar round lg" :style="'background-image:url('+memberInfo.headImgUrl+');'"></view>
            <view class="content flex-sub">
              <view>{{memberInfo.nickname}}</view>
              <view class="text-gray text-sm flex justify-between">
                {{ memberInfo.createTime | timeFormat('yyyy-MM-dd hh:mm')}}
              </view>
            </view>
          </view>
        </view>
        <view class="text-content">
          演示分享生成海报
        </view>
        <view class="grid flex-sub padding-lr">
          <view class="bg-img only-img" :style="'background-image:url('+mainImg+');height:400px'" mode="aspectFit">
          </view>
        </view>
        <view class="text-gray text-sm text-right padding">
          <text class="cuIcon-attentionfill margin-lr-xs"></text> 10
          <text class="cuIcon-appreciatefill margin-lr-xs"></text> 20
          <text class="cuIcon-messagefill margin-lr-xs"></text> 30
        </view>
      </view>
    </view>

    <xf-poster @onSharePoster="onSharePoster" @posterUrlSuccess="posterUrlSuccess" :posterData="posterData"></xf-poster>
  </view>
</template>

<script>
  import {
    baseURL
  } from "@/config";
  export default {
    data() {
      return {
        id: null,
        memberInfo: null,
        mainImg: 'https://imgsxf.xiaofu.fun/upload/app/info/20220725/e269bf14bec140efabd22359651a45af.jpg',
        posterData: {
          width: '750px',
          height: '1020px',
          background: '#ffffff',
          views: [],
          start: false
        },
        posterUrl: null,
      }
    },
    computed: {
      canLoad() {
        return this.hasLogin && this.hasReady
      },
      userInfo() {
        return this.$store.getters.userInfo
      },
      appInfo() {
        return this.$store.getters.defaultAppInfo
      },
    },
    watch: {},
    async onLoad(options) {
      this.id = options.id || null
      if (options && options.scene) {
        try {
          let obj = this.$xf.getUrlVars(options.scene)
          if (obj.id) {
            this.id = obj.id
          }
        } catch (e) {
          console.log('解析scene失败', e)
        }
      }
      this.setInfo();
      uni.$u.mpShare.path = "/pages/index/user?id=" + this.id;
    },
    onShow() {},
    methods: {
      async setInfo() {
        this.memberInfo = await this.$api.getWxMemberInfo(this.id)
        uni.setNavigationBarTitle({
          title: this.memberInfo.nickname
        })
      },
      getMpQrcode() {
        return baseURL +
          `/api/xf/open/wxaqrcode?jbId=${this.appInfo.appId}&page=pages/index/user&scene=id=${this.id}`
      },
      showPoster() {
        if (this.posterUrl) {
          uni.previewImage({
            current: this.posterUrl,
            urls: [this.posterUrl]
          });
        }
      },
      posterUrlSuccess(url) {
        //海报生成成功
        this.posterUrl = url
        console.log(url)
        this.showPoster()
      },
      onSharePoster() {
        if (this.posterUrl) {
          this.showPoster()
          return
        }
        console.log('拼接海报数据')
        let qrcode = this.getMpQrcode()
        let views = [{
            type: 'image',
            src: this.mainImg,
            mode: 'aspectFill',
            css: {
              left: 30,
              top: 30,
              width: 690,
              height: 690
            }
          },
          {
            type: 'image',
            src: this.memberInfo.headImgUrl,
            mode: 'aspectFill',
            css: {
              left: 30,
              top: 760,
              width: 48,
              height: 48,
              radius: '50%',
              border: '1px solid #ffffff'
            }
          }, {
            type: 'image',
            src: qrcode,
            mode: 'aspectFill',
            css: {
              left: 750 - 30 - 178,
              top: 30 + 690 + 300 / 2 - 178 / 2,
              width: 178,
              height: 178
            }
          },
          {
            type: 'text',
            text: this.$xf.wordEllipsis(this.memberInfo.nickname, 16) + ' 向您推荐',
            css: {
              left: 98,
              top: 760,
              fontSize: 28,
              lineHeight: 48,
              textAlign: 'left',
              color: '#999999'
            }
          }, {
            type: 'text',
            text: this.appInfo.appName,
            css: {
              left: 30,
              top: 828,
              fontSize: 28,
              lineHeight: 40,
              textAlign: 'left',
              color: '#999999',
              maxLines: 1,
              width: 400
            }
          }, {
            type: 'text',
            text: '后台接口使用jbolt开发~',
            css: {
              left: 30,
              top: 896,
              fontSize: 28,
              lineHeight: 40,
              textAlign: 'left',
              color: '#999999',
              maxLines: 2,
              width: 400
            }
          }
        ]
        this.posterData.views = views;
        this.posterData.start = true;
      }
    }
  }

</script>

<style lang="scss" scoped>


</style>
